import { CloseCircleFilled } from '@ant-design/icons';
import { Button } from 'antd';
import { FC, useEffect, useState } from 'react';
import { YmChoiceStaffModal } from 'ym-design';
import { useChoiceStaff } from './useChoiceStaff';

import { getPersonList } from './data';
import Ostyle from './index.less';

type Item = { name?: string; id?: string; phone?: string; type?: number };

export type YmEntChoiceStaffModalProps = {
  value?: Item[];
  onChange?: (value: Item[] | undefined) => void;
};

const YmEntChoiceStaffModal: FC<YmEntChoiceStaffModalProps> = ({ value, onChange }) => {
  const choiceStaff = useChoiceStaff({ multiple: true, choiceType: ['org'] });
  const [selectedPerson, setSelectedPerson] = useState<Item[]>();

  const openChoessPerson = async (appleV: any) => {
    choiceStaff.ref?.current?.open();
  };

  const onClear = () => {
    setSelectedPerson(undefined);
    onChange?.(undefined);
  };

  useEffect(() => {
    setSelectedPerson(value);
  }, [value]);

  return (
    <div className="ym-enterprise-choice-staff-modal">
      <div className={Ostyle.selpBox}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Button type="dashed" onClick={openChoessPerson}>
            添加
          </Button>
          <div style={{ marginLeft: 8 }}>
            {selectedPerson?.length ? (
              <span className={Ostyle.count}>{'共' + selectedPerson.length + '人'}</span>
            ) : (
              <span className={Ostyle.placeh}>请添加人员</span>
            )}
          </div>
        </div>

        {selectedPerson?.length ? (
          <CloseCircleFilled style={{ fontSize: '12px', color: '#ccc' }} onClick={onClear} />
        ) : null}
      </div>

      <YmChoiceStaffModal
        value={[]}
        modalPorps={{
          destroyOnClose: true,
          getContainer: () => document.body,
          onOk: (e, val) => {
            const orgGuidList: string[] = [],
              personIdList: string[] = [];

            val.forEach((item) => {
              if (item.personId) {
                personIdList.push(item.personId);
              } else if (item.guid) {
                orgGuidList.push(item.guid);
              }
            });

            // NOTE: 如果orgGuidList为空数组，就会查全部的数据，所以需要判断
            if (orgGuidList.length > 0) {
              getPersonList({ orgGuidList, personIdList }).then((res) => {
                const value = res.map((v) => ({
                  id: v.personId,
                  name: v.personName,
                  phone: v.personPhone,
                  type: 1,
                }));

                setSelectedPerson(value);

                onChange?.(value);

                choiceStaff.ref?.current?.close();
              });
            } else {
              const value = val.map((v) => ({
                id: v.personId,
                name: v.personName,
                phone: v.phone,
                type: 1,
              }));

              setSelectedPerson(value);

              onChange?.(value);

              choiceStaff.ref?.current?.close();
            }
          },
        }}
        {...choiceStaff}
      />
    </div>
  );
};

export default YmEntChoiceStaffModal;
